<%--
  Created by IntelliJ IDEA.
  User: tang
  Date: 2020/4/25
  Time: 12:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %>

<!DOCTYPE html>
<html>
<head>
    <title>我的商城 | 内容管理</title>
    <jsp:include page="../includs/header.jsp"></jsp:include>
    <link rel="stylesheet" href="/static/assets/plugins/treeTable/themes/vsStyle/treeTable.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <jsp:include page="../includs/nav.jsp"></jsp:include>
    <!-- Main Sidebar Container -->
    <jsp:include page="../includs/menu.jsp"></jsp:include>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">分类列表</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/main">主页</a></li>
                            <li class="breadcrumb-item active">分类列表</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <c:if test="${baseResult != null}">
                            <div class="alert alert-${baseResult.status == 200 ? "success" : "danger"} alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;
                                </button>
                                    ${baseResult.message}
                            </div>
                        </c:if>
                        <div class="card">
                            <div class="row pl-30 pt-10 card-footer m-0">
                                <a href="/content/category/form" class="btn btn-default btn-sm mr-10"><i
                                        class="fa fa-plus"></i>新增</a>
                                <a href="#" class="btn btn-default btn-sm mr-10"><i class="fa fa-download"></i>导入</a>
                                <a href="#" class="btn btn-default btn-sm mr-10"><i class="fa fa-upload"></i>导出</a>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body table-responsive">
                                <table id="treeTable" class="table table-hover text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>名称</th>
                                            <th>排序</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach items="${tbContentCategories}" var="tbContentCategory">
                                            <tr id="${tbContentCategory.id}" pId="${tbContentCategory.parent.id}">
                                                <td>${tbContentCategory.id}</td>
                                                <td>${tbContentCategory.name}</td>
                                                <td>${tbContentCategory.sortOrder}</td>
                                                <td>
                                                    <a href="/content/category/form?id=${tbContentCategory.id}" class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o"></i>编辑</a>
                                                    <button type="button" class="btn btn-danger btn-sm" onclick="App.deleteSingle('/content/category/delete', '${tbContentCategory.id}', '警告：该删除操作会将包括选中类目在内的全部子类目及属于类目的内容一并删除，请谨慎操作！您还确定继续吗？')"><i class="fa fa-trash"></i>删除</button>
                                                    <a href="/content/category/form?parent.id=${tbContentCategory.id}&parent.name=${tbContentCategory.name}" class="btn btn-default btn-sm"><i class="fa fa-plus"></i>新增下级菜单</a>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>

    </div>
    <!-- /.content-wrapper -->
    <jsp:include page="../includs/copyright.jsp"></jsp:include>
</div>
<jsp:include page="../includs/footer.jsp"></jsp:include>
<script src="/static/assets/plugins/treeTable/jquery.treeTable.min.js"></script>

<sys:modal/>

<script>
    $(function () {
        $('#treeTable').treeTable({
            column: 1,
            expandLevel : 2,
        });
    });
</script>
</body>

</html>